<template>
  <div class="profile">
    <!-- 顶部导航栏 -->
    <div class="nav-header">
      <van-icon class="back-icon" name="arrow-left" @click="goBack" />
      <span class="nav-title">个人信息</span>
    </div>

    <!-- 头像区域 -->
    <div class="avatar-section">
      <div class="avatar-wrapper">
        <van-image
            round
            width="88"
            height="88"
            :src="userimg"
            class="avatar-image"
        />
        <div class="avatar-edit" @click="editProfile">
          <van-icon name="photograph" />
          <span>更换头像</span>
        </div>
      </div>
    </div>

    <!-- 个人信息卡片 -->
    <div class="info-card">
      <div class="info-item" @click="editNickname">
        <span class="item-label">昵称</span>
        <div class="item-content">
          <span>{{ username }}</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="info-item" @click="editGender">
        <span class="item-label">性别</span>
        <div class="item-content">
          <span>{{ usersex === 1 ? '男' : '女' }}</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="info-item" @click="updatePhone">
        <span class="item-label">手机号码</span>
        <div class="item-content">
          <span>{{ userphone }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <!-- 账号安全卡片 -->
    <div class="security-card">
      <div class="card-title">账号安全</div>

      <div class="info-item" @click="goEmail">
        <span class="item-label">邮箱绑定</span>
        <div class="item-content">
          <span>{{ useremail || '未绑定' }}</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="info-item">
        <span class="item-label">Facebook 账户</span>
        <div class="item-content">
          <span>未绑定</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="info-item">
        <span class="item-label">Google 账户</span>
        <div class="item-content">
          <span>未绑定</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-section">
      <van-button type="danger" block @click="logout">退出登录</van-button>
    </div>

    <!-- 弹窗组件 -->
    <van-popup v-model="avatarDialogVisible" position="bottom" round>
      <div class="upload-popup">
        <div class="popup-title">更换头像</div>
        <van-uploader
            v-model="avatarFiles"
            :max-count="1"
            :after-read="afterAvatarRead"
            accept="image/*"
        >
          <div class="upload-btn">
            <van-icon name="photograph" size="24" />
            <span>选择照片</span>
          </div>
        </van-uploader>
        <van-button class="cancel-btn" block @click="avatarDialogVisible = false">取消</van-button>
      </div>
    </van-popup>

    <!-- 其他弹窗保持不变 -->
    <van-dialog v-model="nicknameDialog" title="修改昵称" @confirm="updateNickname">
      <van-field v-model="newNickname" placeholder="请输入新昵称" />
    </van-dialog>

    <van-dialog v-model="genderDialog" title="修改性别" @confirm="updateGender">
      <van-radio-group v-model="newGender">
        <van-radio name="1">男</van-radio>
        <van-radio name="2">女</van-radio>
      </van-radio-group>
    </van-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'ProfileView',
  data() {
    return {
      useremail: "",
      userimg: "",
      username: "",
      userphone: "",
      usersex: "",
      avatarDialogVisible: false, // 控制头像上传弹窗的可见性
      avatarFiles: [], // 存储头像文件
      nicknameDialog: false,
      genderDialog: false,
      newNickname: "",
      newGender: "1" // 默认性别

    };
  },
  methods: {
    goBack() {
      this.$router.push({path:'/mine',query:{id:this.id}});
    },
    editProfile() {
      this.avatarDialogVisible = true; // 显示上传头像弹窗
    },
    afterAvatarRead(file) {
      const formData = new FormData();
      formData.append('file', file.file); // 将选中的文件添加到 FormData

      // 上传头像接口
      axios.post("http://localhost:9999/api-user/oss/upload", formData)
          .then(uploadResponse => {
            this.userimg = uploadResponse.data;
            axios.post("http://localhost:9999/api-user/user/updateimg?img="+this.userimg+"&id="+this.id).then(res=>{
              if (res.data.code == 1){
                this.$toast.success("修改成功");
              }else {
                this.$toast.fail(res.data.message);
              }
            })
          }).catch(error => {
        this.$toast.fail("请求失败，请刷新重试")
      })

    },

    goEmail() {
      this.$router.push({ path: "/updateEmail", query: { id: this.id } });
    },
    updatePhone() {
      this.$router.push({ path: "/updatephone", query: { id: this.id } });
    },
    logout() {
      axios.post("http://localhost:9999/api-user/user/logout?id="+this.id).then(res => {
        this.$toast({message: "退出登录成功"});
        localStorage.removeItem("user");
        this.$router.push("/login");
      }).catch(error => {
        this.$toast.fail("请求失败，请刷新重试")
      });
    },
    editNickname() {
      this.newNickname = this.username; // 预填当前昵称
      this.nicknameDialog = true; // 打开修改昵称模态框
    },
    updateNickname() {

      axios.post("http://localhost:9999/api-user/user/updateUsername?username="+this.newNickname+"&id="+this.id)
          .then(res => {
            if (res.data.code === 1) {
              this.$toast.success("修改成功");
              this.username = this.newNickname;
              this.nicknameDialog = false; // 关闭模态框
            } else {
              this.$toast.fail(res.data.message);
            }
          }).catch(error => {
        this.$toast.fail("请求失败，请刷新重试")
      });
    },
    editGender() {
      this.newGender = this.usersex; // 预填当前性别
      this.genderDialog = true; // 打开修改性别模态框
    },
    updateGender() {
      axios.post("http://localhost:9999/api-user/user/updateSex?sex="+this.newGender+"&id="+this.id)
          .then(res => {
            if (res.data.code === 1) {
              this.$toast.success("修改成功");
              this.usersex = this.newGender;
              this.genderDialog = false; // 关闭模态框
            } else {
              this.$toast.fail(res.data.message);
            }
          }).catch(error => {
        this.$toast.fail("请求失败，请刷新重试")
      });
    }
  },
  created() {
    this.user=localStorage.getItem("user");
    let user=JSON.parse(this.user);
    console.log(user.id)
    this.id=user.id;
    axios.post("http://localhost:9999/api-user/user/find?id="+this.id).then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.username = res.data.data[0].username;
        this.usersex = res.data.data[0].usersex;
        this.useremail = res.data.data[0].useremail;
        this.userimg = res.data.data[0].userimg;
        this.userphone = res.data.data[0].userphone;
      }
    }).catch(error => {
      this.$toast.fail("网络较差，请刷新重试");    });
  }
}
</script>

<style scoped>
.profile {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 100;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.back-icon {
  font-size: 20px;
  color: #333;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  margin-right: 24px;
}

.avatar-section {
  margin-top: 44px;
  padding: 24px 0;
  background: #fff;
  display: flex;
  justify-content: center;
}

.avatar-wrapper {
  position: relative;
  text-align: center;
}

.avatar-image {
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.avatar-edit {
  margin-top: 8px;
  color: #666;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.info-card, .security-card {
  margin: 12px 16px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.card-title {
  padding: 16px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
}

.item-label {
  color: #333;
  font-size: 15px;
}

.item-content {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
}

.item-content .van-icon {
  font-size: 16px;
  color: #999;
}

.logout-section {
  margin: 24px 16px;
}

.logout-section .van-button {
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
}

.upload-popup {
  padding: 20px;
}

.popup-title {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}

.upload-btn {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f5f5f5;
  border-radius: 22px;
  margin-bottom: 12px;
}

.cancel-btn {
  margin-top: 12px;
  height: 44px;
  border-radius: 22px;
}
</style>
